<template>
  <div class="common-card  bg-white">
    <dc-cell class="main-title home" title="营业分析" :to="'/bsAnalysis'" value="详情" sVal="true" isLink></dc-cell>

    <dc-row class="pt40 pb40 mid1px" type="flex" justify="center">
      <dc-col class="card-data" span="7">
        <tshSpan :value ='analysisDetail.busiTotal' class="num"></tshSpan>
        <span class="label">营业额</span>
      </dc-col>
      <dc-col class="card-data" span="7">
        <tshSpan :value ='analysisDetail.discTotal' class="num"></tshSpan>
        <!-- <span class="num">{{analysisDetail.discTotal}}</span> -->
        <span class="label">优惠金额</span>
      </dc-col>
      <dc-col class="card-data" span="7">
        <tshSpan :value ='analysisDetail.incomeTotal' class="num"></tshSpan>
        <!-- <span class="num">{{analysisDetail.incomeTotal}}</span> -->
        <span class="label">实际收入</span>
      </dc-col>
    </dc-row>
    <div class="sub-title">{{echartTitle}}</div>
    <div class="">
      <div class="common-chart" id="gauge"></div>
    </div>
  </div>
</template>

<script>
  import {initGauge} from '@/common/echarts/gauge';
  import {initColumn} from '@/common/echarts/column';
  import api from '@/common/api/bsAnalysis';
  import {col, row} from '@/common/Flex';
  import cell from '@/common/plugins/cell';
  import {mapGetters} from 'vuex';
  export default {
    data () {
      return {
        analysisDetail: {
          finishRate: '0',
          busiGoal: '0',
          busiTotal: 0,
          discTotal: 0,
          incomeTotal: 0,
          breakevenLineGap: 0,
          businessGoalGap: 0
        },
        richColor: '#ccc',
        isShops: true,
        echartTitle: '今日营业目标达成情况',
        dcChart: null,
        rankChart: null,
        itemData: ['0'],
        itemName: ['暂无数据']
      };
    },
    components: {
      'dc-col': col,
      'dc-row': row,
      'dc-cell': cell
    },
    mounted () {
      if (this.store.storeCode) {
        this.isShops = false;
        this.echartTitle = '今日营业目标达成情况';
        this.dcChart = initGauge('#gauge');
        this.initGauge();
      } else {
        this.isShops = true;
        this.echartTitle = '营业额排名';
        this.rankChart = initColumn('#gauge');
        this._getShopsRank({});
        this.initRank();
      }
      this._getBsAnalysisDetail({});
    },
    activated () {
      this.analysisDetail = {
        finishRate: '0',
        busiGoal: '0',
        busiTotal: 0,
        discTotal: 0,
        incomeTotal: 0,
        breakevenLineGap: 0,
        businessGoalGap: 0
      };
      this.itemData = [];
      this.itemName = [];
      if (!this.store.storeCode) {
        this.isShops = true;
        this.echartTitle = '营业额排名';
        this.dcChart = this.dcChart ? this.dcChart.dispose() : '';
        this.rankChart = this.rankChart ? this.rankChart : initColumn('#gauge');
        this._getShopsRank({});
        this._getBsAnalysisDetail({});
      } else {
        this.isShops = false;
        this.echartTitle = '今日营业目标达成情况';
        this.rankChart = this.rankChart ? this.rankChart.dispose() : '';
        this.dcChart = this.dcChart ? this.dcChart : initGauge('#gauge');
        this._getBsAnalysisDetail({});
      }
      this.richColor = '#ccc';
    },
    methods: {
      //获取营业日报
      _getBsAnalysisDetail (data) {
        this.dcChart && this.dcChart.showLoading();

        api.getBsAnalysisDetail(data)
          .then(res => {
            this.analysisDetail = res;
            if (!this.isShops) {
              let fi = parseFloat(this.analysisDetail.finishRate.replace(',', ''));
              if (fi <= 50 && fi > 0) {
                this.richColor = '#FE8A70';
              }
              if (fi <= 80 && fi > 50) {
                this.richColor = '#FFCA6F';
              }
              if (fi > 80) {
                this.richColor = '#66CF8E';
              }
              this.initGauge();
            }
          }, () => this.initGauge());
      },
      _getShopsRank (data) {
        this.itemName = ['暂无数据'];
        this.itemData = [];
        this.rankChart && this.rankChart.hideLoading();
        data.timeFlag = -1;
        //多店查询营业额排行
        api.getBsAnalysisRank(data).then(res => {
          if (res && res.length > 0) {
            this.itemData = [];
            this.itemName = [];
            // **************************************
            //代理商大会结束之后询问经理删除即可
            if (res.isTest) {
              res.map((e, i) => {
                e.storeName = `测试门店${i + 1}`;
                return e;
              });
            }
            // **************************************
            //代理商大会结束之后询问经理删除即可
            let self = this;
            res.forEach((item) => {
              self.itemData.push(item.busiTotal);
              if (item.storeName && item.storeName.length > 9) {
                item.storeName = item.storeName.replace(/(.{9})/g, '$1\n'); //格式化处理  换行
              }
              self.itemName.push(item.storeName);
            });
          }
          this.initRank();
        }, () => this.initRank());
      },
      initGauge () {
        this.dcChart && this.dcChart.hideLoading();
        this.dcChart.setOption({
          tooltip: {
            formatter: this.analysisDetail.finishRate + '%'
          },
          series: [
            {
              title: {
                textStyle: {
                  fontSize: '9px'
                }
              },
              name: '业务指标',
              type: 'gauge',
              startAngle: 225,
              endAngle: -45,
              min: 0,
              max: parseInt(this.analysisDetail.busiGoal.replace(',', '')) || 1,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 20,
                  shadowBlur: 0,
                  color: [
                    [parseFloat(this.analysisDetail.finishRate.replace(',', '')) / 100, this.richColor],
                    [1, '#D9D8D8']
                  ]
                }
              },
              axisLabel: {
                show: false
              },
              itemStyle: { //仪表盘指针样式
                color: this.richColor,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              pointer: { //仪表盘指针
                show: true,
                width: 5
              },
              detail: {
                color: this.richColor,
                fontSize: 20,
                formatter: this.analysisDetail.finishRate + '%'
              },
              data: [{value: parseInt(this.analysisDetail.busiGoal.replace(',', '')) ? this.analysisDetail.busiTotal : 0, name: '完成率'}]
            }
          ]
        });
      },
      initRank () {
        this.rankChart && this.rankChart.hideLoading();
        this.rankChart.setOption({
          legend: {
            data: ['营业额']
          },
          grid: {
            left: '3%',
            right: '10%',
            top: '5%',
            bottom: '10%'
          },
          yAxis: [
            {
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                fontSize: 11,
                color: '#666',
                align: 'right'
              },
              type: 'category',
              data: this.itemName.reverse()
            }
          ],
          xAxis: [
            {
              show: false,
              position: 'bottom',
              type: 'value',
              name: '营业额'
            }
          ],
          series: [
            {
              name: '营业额',
              type: 'bar',
              barMaxWidth: 20,
              label: {
                show: true,
                color: '#333',
                position: 'right'
              },
              data: this.itemData.reverse(),
              itemStyle: {
                color: '#F7D330'
              }
            }
          ]
        });
      }
    },
    computed: {
      ...mapGetters(['store'])
    }
  };
</script>

<style lang="scss">
  @import "../../../assets/css/variable";
  #gauge {
    height: px2rem(412px);
  }
</style>
